<template>
  <view>
    <!-- 头像昵称区域 -->
    <view class="top-top">
      <view class="top-box">
        <image :src="theUserAvatar" class="avatar"></image>
        <view class="top-a">
          <view class="nickname">{{ theUserName }}</view>
          <view class="send_time">{{ sendTime }}</view>
        </view>
      </view>
      <!-- 关注按钮 -->
      <button
        v-if="showFollowButton"
        class="follow-btn"
        :class="{ followed: isFollowed }"
        @click="followUser"
      >
        {{ isFollowed ? "已关注" : "关注" }}
      </button>
      <view class="requireNum">
        需人数&nbsp;{{ requiredPeople }}&nbsp;
        <br />
        已加入&nbsp;{{ joinPeople }}&nbsp;
      </view>
    </view>
    <!-- 标题与组团详情 -->
    <view class="tuan_info">
      <view class="tuan_title">{{ tuanTitle }}</view>
      <view class="tuan_detail">{{ tuanDetail }}</view>
      <view
        class="image-container"
        v-for="(image, index) in images"
        :key="index"
      >
        <image :src="image" class="tuan-image" mode="widthFix"></image>
      </view>
      <!-- 标签数组显示 -->
      <view class="tags-container" v-if="tagName && tagName.length > 0">
        <view class="tag" v-for="(tag, tagIndex) in tagName" :key="tagIndex">{{
          tag
        }}</view>
      </view>
    </view>
    <!-- 评论组件 -->
    <group-comments :tuanId="tuanId"></group-comments>
    <!-- 退出组团按钮 -->
    <view class="join-group-btn-container">
      <button class="join-group-btn" @click="exitGroup">退出组团</button>
    </view>
    <!-- 弹出框 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="info"
        title="提示"
        content="是否确定退出该组团？"
        :before-close="true"
        @confirm="confirmJoin"
        @close="cancelJoin"
        class="exit-tips"
      >
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>
  
  <script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("m_user", ["userinfo"]),
    showFollowButton() {
      return this.theUserId !== uni.getStorageSync("userId");
    },
  },
  data() {
    return {
      userId: uni.getStorageSync("userId"),
      theUserId: "", //组团发布者id
      theUserName: "", //组团发布者昵称
      theUserAvatar: "", //组团发布者头像
      tuanId: "",
      tuanTitle: "",
      tuanDetail: "",
      sendTime: "",
      images: [],
      tagName: [],
      requiredPeople: "",
      joinPeople: "",
      groupDetailVo: {},
      isFollowed: "", // 关注状态
    };
  },
  onLoad(options) {
    if (options && options.tuanId) {
      const tuanId = parseInt(options.tuanId, 10);
      if (!isNaN(tuanId)) {
        uni.$http
          .get(`/tuan/getGroupById/?tuanId=${tuanId}&userId=${this.userId}`)
          .then((res) => {
            const responseData = res.data;
            if (responseData.code === 200) {
              this.groupDetailVo = responseData.data;
              this.theUserId = this.groupDetailVo.theUserId;
              this.theUserName = this.groupDetailVo.theUserName;
              this.theUserAvatar = this.groupDetailVo.theUserAvatar;
              this.tuanId = this.groupDetailVo.tuan.tuanId;
              this.tuanTitle = this.groupDetailVo.tuan.tuanTitle;
              this.tuanDetail = this.groupDetailVo.tuan.tuanDetail;
              this.sendTime = this.groupDetailVo.tuan.sendTime;
              this.images = this.groupDetailVo.images || [];
              this.tagName = this.groupDetailVo.tagName;
              this.requiredPeople = this.groupDetailVo.tuan.requiredPeople;
              this.joinPeople = this.groupDetailVo.tuan.joinPeople;
              this.isFollowed = this.groupDetailVo.isFollowed;
              console.log("获取组团信息成功", responseData.data);
            } else {
              console.error("获取组团信息失败", responseData);
            }
          })
          .catch((err) => {
            console.error("获取组团信息失败", err);
          });
      } else {
        console.warn("无效的组团id:", options.tuanId);
      }
    } else {
      console.warn("缺少组团id");
    }
  },
  methods: {
    exitGroup() {
      // 添加退出组团的逻辑
      console.log("退出组团按钮被点击");
      this.$refs.popup.open();
    },

    exitGroupRequest() {
      uni.$http
        .delete("/tuan/exitGroup", {
          tuanId: this.tuanId,
          userId: this.userId,
        })
        .then((res) => {
          const responseData = res.data;
          if (responseData.code === 200) {
            console.log("退出组团成功", responseData.data);
            uni.showToast({
              title: responseData.data,
              icon: "none",
              duration: 2000,
            });
          } else {
            console.log("退出组团失败", responseData);
            uni.showToast({
              title: responseData.message,
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.error("退出组团失败:", err);
          uni.showToast({
            title: "退出组团失败",
            icon: "none",
            duration: 2000,
          });
        });
    },

    confirmJoin() {
      this.exitGroupRequest();
      this.$refs.popup.close();
    },

    cancelJoin() {
      this.$refs.popup.close();
    },

    followUser() {
      this.isFollowed = !this.isFollowed; // 切换关注状态
      const followDto = {
        userId: this.userId,
        followedUserId: this.theUserId,
        isFollowed: this.isFollowed,
      };
      console.log("发送关注请求:", {
        userId: this.userId,
        followedUserId: this.theUserId,
        isFollowed: this.isFollowed,
      });
      uni.$http
        .post("/follow/followUser", followDto)
        .then((res) => {
          const responseData = res.data;
          if (responseData.code === 200) {
            if (this.isFollowed) {
              console.log("已关注");
              // 这里可以添加关注用户的逻辑
              uni.showToast({
                title: "关注成功~",
                icon: "none",
                duration: 2000,
              });
            } else {
              console.log("取消关注");
              // 这里可以添加取消关注的逻辑
              uni.showToast({
                title: "已取消关注",
                icon: "none",
                duration: 2000,
              });
            }
          }
        })
        .catch((err) => {
          console.error("关注/取消关注失败", err);
        });
    },
  },
};
</script>
  
  <style lang="scss">
page {
  background-color: white;
  padding-bottom: 60px;
}

.top-top {
  display: flex;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  justify-content: space-between;

  .requireNum {
    margin-top: 11px;
    color: #938e8e;
    font-size: 11px;
    text-align: right;
    margin-left: auto;
    margin-right: 15px;
    line-height: 18px;
  }

  .follow-btn {
    margin-top: 11px;
    height: 30px;
    font-size: 12px;
    background-color: #fbd269;
    color: white;
    border: none;
    border-radius: 20px;
    text-align: center;

    &.followed {
      background-color: #ccc;
      color: #666;
    }
  }
}

.tuan_info {
  padding: 15px;

  .tuan_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .tuan_detail {
    margin-bottom: 20px;
  }

  .image-container {
    margin-bottom: 8px;

    .tuan-image {
      width: 100%;
      display: block;
      border-radius: 7px;
    }
  }
}

.top-box {
  height: 95rpx;
  width: 205px;
  display: flex;
  margin-top: 8px;
  padding-left: 8px;
  position: relative;

  .avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .top-a {
    display: flex;
    flex-direction: column;
    padding-left: 30rpx;

    .nickname {
      color: #1d1c1c;
      font-size: 14px;
      max-width: 139px;
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 省略号显示 */
    }

    .send_time {
      color: #6a6666;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}

.tags-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .tag {
    background-color: #f0f0f0;
    color: #333;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 14px;
  }
}

// 添加退出组团按钮样式
.join-group-btn-container {
  padding-top: 5px;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1000; // 确保按钮在最上层
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
}

.join-group-btn {
  width: 90%;
  height: 90%;
  font-size: 17px;
  color: rgb(96, 96, 96);
  background-color: #fbd269;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
  border: none;
  text-align: center;
  border-radius: 40px;
}

</style>